<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/personalAdmin/changeShift'">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="form" class="flex1" label-width="90px">
                <el-form-item label="门店">
                    <!-- <el-input style="width:230px" v-model="form.username"></el-input> -->
                    <el-select v-model="form.store_id" style="width:230px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请人">
                    <el-input v-model="form.store_name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="申请日期">
                    <el-date-picker
                    v-model="form.apply_date"
                    type="date"
                    value-format="timestamp"
                    placeholder="">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="right">
                <el-button @click="init">重置</el-button>
                <el-button @click="init()" type="primary">查询</el-button>
            </div>
         </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left"> 调班列表 </div>
            </div>
            <el-table :header-cell-style="{background:'#f5f6f8'}" v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column prop="store.title" width="80px" label="门店"  ></el-table-column>
                <el-table-column prop="staff.name" label="申请人"> </el-table-column>
                <el-table-column prop="position.title" label="岗位"> </el-table-column>
                <el-table-column prop="exchange.name" label="调换人" width="110"> </el-table-column>
                <el-table-column prop="apply_start_time" label="原调换日期">
                    <template slot-scope="scope">
                        {{scope.row.apply_date | parseTime('{y}-{m}-{d}')}}
                    </template>
                </el-table-column>
                <el-table-column prop="apply_end_time" label="调换日期">
<template slot-scope="scope">
                        {{scope.row.exchange_date | parseTime('{y}-{m}-{d}')}}
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="调换原因"> </el-table-column>
                <el-table-column prop="create_time" label="申请日期"> </el-table-column>
                <el-table-column prop="create_time" label="状态">
                    <template slot-scope="scope">
                        {{['','审核中','通过','驳回'][scope.row.status]}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="90" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click="examine(scope.row)" >查看</span>
                        <!-- <span class="tab-table-text" @click="examine(scope.row)">审核</span> -->
                        <!-- <span class="tab-lv-text" @click="diaoc(1,scope.row)">通过</span>
                        <span class="tab-red-text" @click="diaoc(2,scope.row)">驳回</span> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="form.page"
                    :page-size="form.limit"
                    layout="prev, pager, next, jumper"
                    :total="form.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
        title="调班申请"
        :visible.sync="callout"
        width="700px"
        :before-close="handleClose">
            <el-descriptions v-if="obj.staff" :column="2" border>
                <el-descriptions-item label="调班申请人">{{obj.staff.name}}</el-descriptions-item>
                <el-descriptions-item label="所属门店/部门">{{obj.store.title}}</el-descriptions-item>
                <el-descriptions-item label="岗位">{{obj.position.title}}</el-descriptions-item>
                <el-descriptions-item label="调换时间">
                    {{obj.apply_date | parseTime('{y}-{m}-{d}')}} 更换为 {{obj.exchange_date | parseTime('{y}-{m}-{d}')}}
                </el-descriptions-item>
                <el-descriptions-item label="调换原因">
                    {{obj.content}}
                </el-descriptions-item>
                <el-descriptions-item label="调换人">{{obj.exchange.name}} </el-descriptions-item>
                <el-descriptions-item label="申请时间">{{obj.create_time}}</el-descriptions-item>
                <el-descriptions-item label="审核状态" :span="2">
                    <el-radio :disabled="ruleForm.readonly" v-model="ruleForm.status" label="2">通过</el-radio>
                    <el-radio :disabled="ruleForm.readonly" v-model="ruleForm.status" label="3">驳回</el-radio>
                </el-descriptions-item>
                <el-descriptions-item v-if="ruleForm.status=='3'" label="驳回原因">
                    <el-input
                    type="textarea"
                    :readonly="ruleForm.readonly"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model.trim="ruleForm.content">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button :loading="isBtn" type="primary" @click="exchangeStatus">提 交</el-button>
            </span>
        </el-dialog>
       </div>
       <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            callout:false,//调出
            ruleForm:{
                id:'',
                status:'2',
                content:'',
            },
            obj:{},
            rules:{
                apply_date:{ required: true, message: '请选择时间', trigger: 'change' },
                store_name:{ required: true, message: '请输入原因', trigger: 'blur' },
                store_id:{ required: true, message: '请选择调入门店', trigger: 'change' }
            },
            form:{
                apply_date:'',
                store_id:'',
                store_name:'',
                page:1,
                limit:10,
                total:0,//总数
            },
            loading:false,
            shopList:[],
            isBtn:false,
            canscroll:false,//滚动触发条件
            activeisload:false,//是否加载完成

            tableData: []
        };
    },
    created() {
        this.homegetStore();
        this.getList();
    },
    methods: {
        examine(row){
            this.obj = row;
            this.callout = true;
            this.ruleForm = row.status==1? {
                id:row.id,
                status:'2',
                content:'',
                readonly:false
            }:{
                id:row.id,
                status:row.status+'',
                content:row.eject_content,
                readonly:true
            }
        },
        handleCurrentChange(val){
            this.form.page = val;
            this.getList();
        },
        async exchangeStatus(){
            let obj = Object.assign({},this.ruleForm);
            if(obj.status==3&&!obj.content)return this.$message.error('请输入驳回原因!')
            this.isBtn = true;
            let {code,data} = await this.$Http.exchangeStatus(obj);
            this.isBtn = false;
            if(code){
                this.$message.success('提交成功!');
                this.handleClose();
                this.init();
            }
        },
        diaoc(type,row){
            console.log('!!!',this.ruleForm);
            this.ruleForm = Object.assign(this.ruleForm,{
                type,
                stay:row.store.title,
                staff_id:row.id,
            })
            console.log('Q',this.ruleForm);
            this.callout = true;
        },
        handleClose(dom){
            this.callout = false;
            dom&&dom();
            this.ruleForm = this.$options.data().ruleForm;
        },
        changeTime(e){
            if(e&&e.length){
                this.form.start_time = e[0];
                this.form.stop_time = e[1];
            }else{
                this.form.start_time = '';
                this.form.stop_time = '';
            }
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        init(type){
            if(type){
                this.form = this.$options.data().form;
            }
            this.page = 1;
            this.getList();
            this.tableData = [];
            this.canscroll = false;
            this.activeisload = false;
        },
        //门店远程搜索
        async remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                let {code,data} = await this.$Http.storegetGoods()
                this.loading = false;
                this.options = this.list.filter(item => {
                return item.label.toLowerCase()
                    .indexOf(query.toLowerCase()) > -1;
                });
            } else {
                this.options = [];
            }
        },
        async getList(){
            this.loading = true;
            let obj = Object.assign({},this.form);
            if(obj.apply_date) obj.apply_date /= 1000;
            let {code,data} = await this.$Http.exchange(obj);
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.form.total = data.total;
                // this.tableData = [... this.tableData,...data.data];
                // if ( this.tableData.length < this.form.total) {
                //     this.activeisload = false;
                //     console.log("已加载完");
                // } else {
                //     this.canscroll = true;
                // }
            }
        },
        pickerDate(){

        },
        change(){

        }
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 180px;
        // display: flex;
    }
}
.red{
    color: #f00 !important;
}
</style>